<!-- uploadify -->
<script src="/lib/uploadify/jquery.uploadify.js" type="text/javascript"></script>
<link href="/lib/uploadify/uploadify.css" rel="stylesheet" type="text/css">
<style rel="stylesheet">
    .thumbnail {
        margin: 0 10px 10px 0;
    }
    .thumbnail .name {
        width: 150px;
        word-break: break-all;
    }
    .thumbnail .pic {
        height: 230px;
        width: 150px;
        margin: 2px auto;
    }
</style>
<script type="text/javascript">
    var flag = true;
    $(function () {
        $("#file_upload_1").uploadify({
            buttonText: '点击选择文件',
            swf: '/lib/uploadify/uploadify.swf',
            uploader: '/tvad/uploadVideoPic',
            fileTypeExts: '*.mp4; *.jpg;*.gif',
            fileTypeDesc: '文件类型支持',
            multi: true,
            fileSizeLimit: '50MB',
            uploadLimit: 50,
            onUploadStart: function (file) {
                flag = false;
            },
            onUploadSuccess: function (file, data, response) {
                flag = true;
                getlist();
            }
        });

        getlist();

        $("#sync").click(function () {
            if (flag) {
                var topic = $('#topic').val();
                $.get("/tvad/filesSync?topic=" + topic + "&random=" + Math.random(), function (result) {
                    if (result == 'true') {
                        alert("已通知服务器同步数据。");
                    }
                });
            } else {
                alert("请等待上传完成后同步！");
            }

        });

    });
    function getlist() {
        $.get("/tvad/filesList?random=" + Math.random(), function (result) {

            $('#filesList').empty();
            $.each(result, function (index, element) {

                var apic = $(".template .thumbnail").clone();

                var btn_delete = apic.find('.delete'),
                        btn_replace = apic.find('.replace'),
                        name = apic.find('.name'),
                        pic = apic.find('.pic');

                name.text(element.name);
                pic.attr('src', element.url);
                btn_delete.click(function () {
                    del(element.name);
                });
                btn_replace.click(function () {
                    replace(element.name);
                });

                $('#filesList').append(apic);

            });
        });
    }
    function del(name) {
        var topic = $('#topic').val();
        $.get("/tvad/delfile?topic=" + topic + "&filename=" + name + "&random=" + Math.random(), function (result) {
            if (result == true) {
                getlist();
                flag = true;
                $('#prompt p').html('文件 ' + name + ' 删除成功！请点击“同步到TV”按钮同步');
                $("#prompt").fadeIn(500);
                setTimeout(function () {
                    $("#prompt").fadeOut(500);
                }, 5000);

            } else {
                $('#prompt p').html('文件 ' + name + ' 删除失败！');
                $("#prompt").fadeIn(500);
                setTimeout(function () {
                    $("#prompt").fadeOut(500);
                }, 3000);
            }
        });
    }
    function replace(name) {
        var topic = $('#topic').val();
        $.get("/tvad/replace?topic=" + topic + "&filename=" + name + "&random=" + Math.random(), function (result) {
            if (result == true) {
                getlist();
                $('#prompt p').html('文件 ' + name + ' 与设备同步成功！');
                $("#prompt").fadeIn(500);
                setTimeout(function () {
                    $("#prompt").fadeOut(500);
                }, 3000);

            } else {
                $('#prompt p').html('文件 ' + name + ' 与设备同步失败！');
                $("#prompt").fadeIn(500);
                setTimeout(function () {
                    $("#prompt").fadeOut(500);
                }, 3000);
            }
        });
    }

</script>
<ol class="breadcrumb">
    <li><a href="#">奇妙云箱</a></li>
    <li>广告内容管理</li>
</ol>
<div class="panel panel-default">
    <div class="panel-heading">
        <span class=" icon-th-large icon-large"></span>
        <span class="panel-title">广告图片列表</span>
    </div>
    <div class="panel-body">
        <div class="alert alert-warning" role="alert">
            <p>
                替换功能使用，上传与文件列表有相同名称的文件，点击列表中的替换按钮即可同步到设备。如：文件列表中有“test.mp4”，上传名称也为“test.mp4”的文件，点击对应的替换按钮同步到设备。<br>
                删除功能使用，点击删除后只是在服务器端删除了文件，请点击“同步到TV”来同步设备和服务器的数据。
            </p>
        </div>
        <div id="prompt" class="alert alert-danger alert-dismissable" style="display: none">
            <p>&nbsp;</p>
        </div>

        <div id="filesList"></div>

        <% if(session.permissionMap[1020]){ %>
        <div class="row">
            <div class="col-xs-10">
                <select id="topic" class="form-control">
                    <option value="null">选择终端订阅号</option>
                    <% sims.forEach(function(sim, index){var phone = 'tv' + sim.sim; %>
                    <option value="<%= phone %>"><%= phone %></option>
                    <% }); %>
                </select>
            </div>
            <div class="col-xs-2">
                <input id="sync" class="btn btn-success form-control" type="button" name="sync" value="同步到TV"/>
            </div>
        </div>
        <% } %>
    </div>
</div>

<% if(session.permissionMap[1018]){ %>
<div class="panel panel-default">
    <div class="panel-heading">
        <span class="icon-upload-alt icon-large"></span>
        <span class="panel-title">上传图片</span>
    </div>
    <div class="panel-body">
        <div class="alert alert-warning" role="alert">
            <p>请选择需要上传的文件，支持JPG、MP4，文件名不能为中文。<span style="color: red;">奖品图片头部必须包含“prize_”字段,</span>与服务器重名的文件会被替换，等待上传完成后再同步到TV。
            </p>
        </div>
        <input type="file" name="file_upload" id="file_upload_1" multiple="true"/>
    </div>
</div>
<% } %>

<div class="template" style="display: none;">
    <div class="thumbnail pull-left">
        <img class="pic" src="..." alt="...">

        <div class="caption">
            <h3 class="name"></h3>

            <p>
                <% if(session.permissionMap[1019]){ %>
                <a href="#" class="btn btn-danger btn-sm delete" role="button">删除</a>
                <% } %>
                <% if(session.permissionMap[1020]){ %>
                <a href="#" class="btn btn-default btn-sm replace" role="button">替换</a>
                <% } %>
            </p>
        </div>
    </div>
</div>